<template>
  <div class="meitituiguang">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <div class="flex">
            <el-button type="danger" size="medium" @click="goid('/zhiboxitong/meitituiguang/meitituiguang_fabu')">添加商品</el-button>
          </div>
          <div class="zhiboxitong_table">
            <el-table :data="list" border style="width: 100%" align="center">
              <el-table-column prop='channel_name' label="商品名称"></el-table-column>
              <el-table-column prop='created_at' label="PV"></el-table-column>
              <el-table-column prop='source_amount' label="UV"> </el-table-column>
              <el-table-column prop='source_amount' label="已销售"> </el-table-column>
              <el-table-column prop='source_amount' label="销售页链接"> </el-table-column>
              <el-table-column prop='source_amount' label="操作"> </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import moment from 'moment'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  export default {
    components: {
      top,left
    },
    name: "meitituiguang",
    data() {
      return {
          list:"",
          tongbuall:"",
          log:false
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {


    }
  }
</script>

<style scoped lang="scss">
  .meitituiguang {
    background: #f2f2f2;
    min-height: 100vh;
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #3A3E4B;height: 100%;}
      .right{ flex-grow: 1;padding: 10px;
        .zhiboxitong_right{
           height: calc(100vh - 90px); overflow: auto; background: #fff; border-radius: 5px; padding: 20px;
        }
        .zhiboxitong_table{ margin-top: 20px;}
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
</style>
